
import {TileDebug, DataTile} from 'ol/source';
import TileLayer from 'ol/layer/WebGLTile';

const getDefaultTileLayer = () => {
  return new TileLayer({
    source: new TileDebug(),
  })
}


const getCustomTileLayer = () => {
  const size = 256;

  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;

  const context = canvas.getContext('2d');
  context.strokeStyle = 'white';
  context.textAlign = 'center';
  context.font = '24px sans-serif';
  const lineHeight = 30;

  return new TileLayer({
    source: new DataTile({
      loader: function (z, x, y) {
        const half = size / 2;
        context.clearRect(0, 0, size, size);
        context.fillStyle = 'rgba(100, 100, 100, 0.5)';
        context.fillRect(0, 0, size, size);
        context.fillStyle = 'black';
        context.fillText(`z: ${z}`, half, half - lineHeight);
        context.fillText(`x: ${x}`, half, half);
        context.fillText(`y: ${y}`, half, half + lineHeight);
        context.strokeRect(0, 0, size, size);
        const data = context.getImageData(0, 0, size, size).data;
        // converting to Uint8Array for increased browser compatibility
        return new Uint8Array(data.buffer);
      },
      // disable opacity transition to avoid overlapping labels during tile loading
      transition: 0,
    }),
  })
}


export {
  getCustomTileLayer,
  getDefaultTileLayer
} 
